<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平台公告</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="home-b2c.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">平台公告</h1>
                <button onclick="searchAnnouncements()" class="text-white">
                    <i class="fas fa-search text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Category Tabs -->
        <div class="px-4 py-2 bg-white border-b border-gray-200">
            <div class="flex space-x-2 overflow-x-auto">
                <button onclick="filterAnnouncements('all')" id="filter-all" class="bg-indigo-500 text-white text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    全部公告
                </button>
                <button onclick="filterAnnouncements('promotion')" id="filter-promotion" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    活动促销
                </button>
                <button onclick="filterAnnouncements('policy')" id="filter-policy" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    政策规则
                </button>
                <button onclick="filterAnnouncements('system')" id="filter-system" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    系统通知
                </button>
            </div>
        </div>

        <!-- Announcements List -->
        <div class="h-[calc(852px-160px)] overflow-y-auto pb-24">
            <div class="p-4">
                <!-- Featured Announcement -->
                <div onclick="viewAnnouncementDetail('202501050001')" class="bg-gradient-to-r from-red-50 to-orange-50 border border-red-200 rounded-xl p-4 mb-4 cursor-pointer hover:shadow-md transition-shadow">
                    <div class="flex items-start">
                        <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full mr-3 flex-shrink-0">热门</span>
                        <div class="flex-1">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-fire text-red-500 mr-2"></i>
                                <h4 class="text-sm font-semibold text-red-700">双11大促报名开启</h4>
                            </div>
                            <p class="text-sm text-gray-700 mb-3">2025年双11购物节商家报名通道已开放，参与商家可享受平台流量扶持、广告位优惠、佣金减免等多项福利。报名截止时间为1月15日，名额有限，先到先得。</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-500">2025-01-05 10:30</span>
                                <span class="text-xs text-red-600">查看详情 <i class="fas fa-chevron-right"></i></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Regular Announcements -->
                <div onclick="viewAnnouncementDetail('202501040002')" class="bg-white border border-gray-200 rounded-lg p-4 mb-3 cursor-pointer hover:shadow-md transition-shadow">
                    <div class="flex items-start">
                        <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full mr-3 flex-shrink-0">政策</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-medium mb-2">商家服务协议更新通知</h4>
                            <p class="text-xs text-gray-600 mb-2">平台商家服务协议将于2025年1月10日更新，新增商家权益保护条款，优化退换货政策...</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-400">2025-01-04 16:20</span>
                                <span class="text-xs text-blue-600">必读</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div onclick="viewAnnouncementDetail('202501040003')" class="bg-white border border-gray-200 rounded-lg p-4 mb-3 cursor-pointer hover:shadow-md transition-shadow">
                    <div class="flex items-start">
                        <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full mr-3 flex-shrink-0">功能</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-medium mb-2">新增商品批量编辑功能</h4>
                            <p class="text-xs text-gray-600 mb-2">商家后台新增商品批量编辑功能，支持批量修改价格、库存、规格等信息，提升管理效率...</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-400">2025-01-04 14:15</span>
                                <span class="text-xs text-green-600">新功能</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div onclick="viewAnnouncementDetail('202501030004')" class="bg-white border border-gray-200 rounded-lg p-4 mb-3 cursor-pointer hover:shadow-md transition-shadow">
                    <div class="flex items-start">
                        <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full mr-3 flex-shrink-0">维护</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-medium mb-2">系统维护通知</h4>
                            <p class="text-xs text-gray-600 mb-2">系统将于1月8日凌晨2:00-4:00进行例行维护，期间可能影响订单处理和数据同步...</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-400">2025-01-03 18:30</span>
                                <span class="text-xs text-yellow-600">重要</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div onclick="viewAnnouncementDetail('202501020005')" class="bg-white border border-gray-200 rounded-lg p-4 mb-3 cursor-pointer hover:shadow-md transition-shadow">
                    <div class="flex items-start">
                        <span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded-full mr-3 flex-shrink-0">培训</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-medium mb-2">商家培训课程上线</h4>
                            <p class="text-xs text-gray-600 mb-2">商家学院新增《数据分析实战》、《爆款打造秘籍》等实用课程，助力商家提升经营能力...</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-400">2025-01-02 10:45</span>
                                <span class="text-xs text-purple-600">学习</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div onclick="viewAnnouncementDetail('202501010006')" class="bg-white border border-gray-200 rounded-lg p-4 mb-3 cursor-pointer hover:shadow-md transition-shadow">
                    <div class="flex items-start">
                        <span class="bg-indigo-100 text-indigo-600 text-xs px-2 py-1 rounded-full mr-3 flex-shrink-0">活动</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-medium mb-2">新年开门红活动开启</h4>
                            <p class="text-xs text-gray-600 mb-2">2025新年开门红活动正式开启，参与商家可享受流量倾斜、广告费用减免等多重福利...</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-400">2025-01-01 08:00</span>
                                <span class="text-xs text-indigo-600">已结束</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Load More -->
                <div class="text-center py-4">
                    <button onclick="loadMoreAnnouncements()" class="bg-gray-100 text-gray-600 text-sm px-6 py-2 rounded-lg hover:bg-gray-200 transition-colors">
                        <i class="fas fa-sync mr-2"></i>加载更多
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Filter announcements by category
        function filterAnnouncements(category) {
            // Remove active styles from all filter buttons
            document.querySelectorAll('[id^="filter-"]').forEach(btn => {
                btn.classList.remove('bg-indigo-500', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-600');
            });
            
            // Add active styles to selected button
            document.getElementById('filter-' + category).classList.remove('bg-gray-100', 'text-gray-600');
            document.getElementById('filter-' + category).classList.add('bg-indigo-500', 'text-white');
            
            // In a real app, this would filter the announcements list
            showToast('筛选：' + getFilterName(category));
        }

        function getFilterName(category) {
            const names = {
                'all': '全部公告',
                'promotion': '活动促销',
                'policy': '政策规则',
                'system': '系统通知'
            };
            return names[category] || '全部公告';
        }

        // Search announcements
        function searchAnnouncements() {
            const keyword = prompt('搜索公告:', '');
            if (keyword && keyword.trim()) {
                showToast('搜索关键词: ' + keyword);
                // In a real app, this would perform search
            }
        }

        // View announcement detail
        function viewAnnouncementDetail(announcementId) {
            window.location.href = 'announcement-detail.html?id=' + announcementId;
        }

        // Load more announcements
        function loadMoreAnnouncements() {
            showToast('正在加载更多公告...');
            // In a real app, this would load more announcements
        }

        // Show toast message
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            filterAnnouncements('all');
        });
    </script>
</body>
</html>